<template>
  <el-container direction="vertical">
    <!-- 自定义页头 -->
    <Header />
    <el-main style="margin-top: 70px">
      <el-card class="box-card">
        <h2>登录界面</h2>
        <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-form">
          <el-form-item label="用户名:" prop="names">
            <el-input v-model="form.names"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="pass">
            <el-input type="password" v-model="form.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="请选择身份">
            <el-radio-group v-model="radio">
              <el-radio label="user">用户</el-radio>
              <el-radio label="admin">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-button type="primary" @click="login" style="width: 200px">登录</el-button>
        </el-form>
      </el-card>
    </el-main>
    <!-- 自定义页脚 -->
    <Footer />
  </el-container>
</template>
<script>
import Footer from "../components/Footer.vue";
import Header from "../components/Header.vue";
import { mapMutations } from 'vuex'

export default {
  data() {
    var renames = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
      }
    };
    return {
      radio: "user",
      form: {
        pass: "",
        names: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        names: [{ validator: renames, trigger: "blur" }],
      },
    };
  },
  components: {
    Footer,
    Header,
  },
  watch: {
    radio(newVal, oldVal) {
      if (newVal === "user") {
        this.handleUserSelection();
      } else if (newVal === "admin") {
        this.handleAdminSelection();
      }
    },
  },

  methods: {
    ...mapMutations("user", ["saveUser"]),
    handleUserSelection() {
      console.log("用户被选中");
      // 执行用户被选中时的逻辑
    },
    handleAdminSelection() {
      console.log("管理员被选中");
      // 执行管理员被选中时的逻辑
    },

    login() {
      if (this.radio == "user") {
        let users = {
          uname: this.form.names,
          upass: this.form.pass,
          // role: this.radio,
        };
        // console.log(users);
        this.axios({
          url: "http://localhost:3000/users/login",
          method: "POST",
          data: users,
        })
          .then((res) => {
            if (
              res.data.data.user[0].status === "active" &&
              res.data.data.user[0].role === "user"
            ) {
              if (res.data.code == 200) {
                //将当前登录的用户对象保存到vuex
                this.saveUser(res.data.data.user);
                //存储token
                window.localStorage.setItem("token", res.data.data.token);
                this.$message.success("登录成功!");
                //跳转到首页
                // console.log("111");
                this.$router.push("/");

              }
            } else if (res.data.data.user[0].role === "user") {
              return alert("该账户已被冻结");
            } else {
              return alert("不存在该用户");
            }
          })
          .catch((err) => {
            this.$message.success("密码和账号不匹配!");

          });
      } else if (this.radio == "admin") {
        let users = {
          uname: this.form.names,
          upass: this.form.pass,
          // role: this.radio,
        };
        console.log(users);
        this.axios({
          url: "http://localhost:3000/admin/login",
          method: "POST",
          data: users,
        })
          .then((res) => {
            if (res.data.data.user[0].role === "admin") {
              if (res.data.code == 200) {
                //将当前登录的用户对象保存到vuex
                this.saveUser(res.data.data.user);
                //存储token
                window.localStorage.setItem("token", res.data.data.token);
             
               this.$message.success("登录成功!");
                //跳转到首页
                this.$router.push("/adminUser");
              }
            } else {
              return alert("不存在该用户");
            }
          })
          .catch((err) => {
            this.$message.success("密码和账号不匹配!");
          });
      }
    },
  },
};
</script>
<style scoped>
.box-card {
  margin: 0 auto;
  width: 480px;
  color: #000000;
}

.el-form-item label {
  color: #000000;
}

.el-form-item {
  height: 80px;
  margin-bottom: 0px;
}

.el-main {
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  line-height: 100px;
}

element.style {
  width: 200px;
}

.el-button--primary {
  background-color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
}

.el-button--primary:hover {
  border-color: rgb(89, 88, 87);
  background-color: rgb(89, 88, 87);
  color: white;
}
</style>